<template>
  <div class="dome-box">
    <h3>tree dome</h3>
    <button @click="selectedNode">selectedNode</button> |
    <button @click="checkeddNode">checkeddNode</button> |
    <button @click="halfcheckeddNode">halfcheckeddNode</button> |
    <tree ref="tree" :source="list" :lozyLoad="lazyLoad" show-check-box>
      <template #icon="loading">
        <i v-if="loading" class="iconfont iconcustom-icon ico-loading"></i>
        <i v-else class="iconfont iconzhankai"></i>
      </template>
    </tree>
  </div>
</template>

<script lang='tsx'>
import { defineComponent, ref, onMounted } from "vue";
import { TreeNodeOptions, TreeInstance } from "./types";
// function recursion(path = '0', level = 2): TreeNodeOptions[] {  // 普通tree
  //     const list = [];
  //     for (let i = 0; i < 2; i += 1) {
  //       const nodeKey = `${path}-${i}`;
  //       const treeNode: TreeNodeOptions  = {
  //         nodeKey,
  //         name: nodeKey,
  //         children: [],
  //         // expanded: true,
  //         // disabled: i % 2 === 0,
  //         selected: nodeKey === '0-1',
  //         hasChildren: true,
  //       };

  //       if (level > 0) {
  //         treeNode.children = recursion(nodeKey, level - 1);
  //       } else {
  //         treeNode.hasChildren = false;
  //       }

  //       list.push(treeNode);
  //     }
  //     return list;
  // }
function recursion(path = "0"): TreeNodeOptions[] {
  // 懒加载
  const list = [];
  for (let i = 0; i < 2; i += 1) {
    const nodeKey = `${path}-${i}`;
    const treeNode: TreeNodeOptions = {
      nodeKey,
      name: nodeKey,
      children: [],
      // expanded: true,
      hasChildren: true
    };

    list.push(treeNode);
  }
  return list;
}
export default defineComponent({
  name: "~dome",
  setup() {
    const tree = ref<TreeInstance>();
    const lazyLoad = (
      node: TreeNodeOptions,
      callback: (children: TreeNodeOptions[]) => void
    ) => {
      const result: TreeNodeOptions[] = [];
      for (let i = 0; i < 3; i += 1) {
        const nodeKey = `${node.nodeKey}-${i}`;
        const treeNode: TreeNodeOptions = {
          nodeKey,
          name: nodeKey,
          children: [],
          // disabled: i % 2 === 0,
          hasChildren: true
        };
        result.push(treeNode);
      }
      setTimeout(() => {
        callback(result);
      }, 1000);
    };
    const list = ref<TreeNodeOptions[]>([]);
    onMounted(() => {
      list.value = recursion();
    });

    const renderNode = (node: TreeNodeOptions) => {
      return (
        <div style="padding: 0 4px;">
          <b style="color: #f20;">{node.name}</b>
        </div>
      )
    };

    const selectedNode = () => {
      const node = tree.value!.getSelectedNode();
      console.log(tree.value, node);
    };

    const checkeddNode = () => {
      const node = tree.value!.getCheckedNodes();
      console.log(tree.value, node);
    };
    const halfcheckeddNode = () => {
      const node = tree.value!.getHalfCheckedNodes();
      console.log(tree.value, node);
    };
    return {
      list,
      lazyLoad,
      renderNode,
      tree,
      selectedNode,
      checkeddNode,
      halfcheckeddNode
    };
  }
});
</script>

<style lang='css' scoped>
</style>
